<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <h1>{{title}}</h1>
        <todo-list></todo-list>
    </div>
</body>

<template id="todolist">
    <div>
        <ipt @getdata="get"></ipt><button>搜索</button>
        <br>
        <checkbox title="全选" :check="allCheck" @allcheck="ac"></checkbox>
        <ul>
            <item
                v-for="(item,idx) in listData"
                :check="item.check"
                :title="item.title"
                :index="idx"
                :key="idx"
                @remove="rm"
                @ocheck="oc"
                @oneset="os"
                >
            </item>
        </ul>
        <p>已完成：{{num}}</p>
    </div>
</template>

<template id="ipt">
    <input type="text" v-model="text" @keyup.enter="add">
</template>

<template id="item">
    <li>
        <checkbox :check="check" @onecheck="oc" :index="index"></checkbox>
        <input v-if="isSet" type="text" @blur="onBlur(index,$event)" :value="title">
        <span v-else @click="set(index)">{{title}}</span>
        <button @click="del(index)">删除</button>
    </li>
</template>

<template id="checkbox">
    <span>
        <input
            type="checkbox"
            :checked="isCheck"
            @change="toggleCheck(index, $event)"
        />
        <label>{{title}}</label>
    </span>
</template>

<script src="../libs/vue.js"></script>
<script>

    const checkbox = {
        props:{
            title:{
                default:""
            },
            check:{
                default:false
            },
            index:{
                default: 0
            }
        },
        template: "#checkbox",
        data(){
            return {
            }
        },
        computed:{
            isCheck(){
                return this.check ? 'checked' : '';
            }
        },
        methods:{
            toggleCheck(i, event){
                // console.log(event.target.checked);
                this.$emit("allcheck", event.target.checked);
                this.$emit("onecheck", event.target.checked, i);
            }
        }
    }

    const item = {
        props:["title", "check", "index"],
        template: "#item",
        components:{
            checkbox
        },
        methods:{
            del(i){
                // console.log(i)
                this.$emit("remove", i);
            },
            oc(check, i){
                this.$emit("ocheck", check, i);
            },
            set(){
                this.isSet = true;
            },
            onBlur(i, event){
                this.isSet = false;
                // console.log(event.target.value)
                this.$emit("oneset", event.target.value, i);
            }
        },
        data(){
            return {
                isSet: false
            }
        }
    }

    const ipt = {
        template: "#ipt",
        data(){
            return {
                text: ""
            }
        },
        methods: {
            add(){
                this.$emit("getdata", this.text);
                this.text = "";
            }
        }
    }

    const todoList = {
        template: "#todolist",
        components:{
            item, checkbox, ipt
        },
        data(){
            return {
                listData: [{
                    title:"今天要学习生命周期函数",
                    check: false
                }],
                allCheck: false
            }
        },
        methods:{
            get(v){
                this.listData.push({
                    check: false,
                    title: v
                })
            },
            rm(i){
                this.listData.splice(i, 1)
            },
            ac(c){
                this.listData.forEach(val=>{
                    val.check = c;
                });
            },
            oc(c, i){
                this.listData[i].check = c;
                this.allCheck = this.listData.every(val=>val.check);
            },
            os(t, i){
                this.listData[i].title = t;
            }
        },
        computed:{
            num(){
                return this.listData.reduce((prev,val)=>val.check ? prev+1 : prev, 0);
            }
        }
    }

    new Vue({
        el:"#app",
        data(){
            return {
                title:"todoList"
            }
        },
        components:{
            todoList
        }
    })
</script>
</html>